<!-- 
  使用方法：
  ndColumns: 列数 组件根据传入的列数自动计算每列的宽度
  data: 数据源
  columns: 列配置
 -->
<template>
  <div class="grid-item" :style="{ 'grid-column-start': `span ${props.span}` }">
    <div class="label" ref="labelRef" :class="props.empty ? 'empty' : ''">
      <div style="position: relative">
        <div v-if="props.required" class="color-red required">*</div>
        <div class="flex items-center">
          {{ props.label }}
          <slot name="labelExtra"></slot>
        </div>
        
      </div>
    </div>
    <div
      class="content"
      :class="[
        props.noContentBorderRight ? 'no-border-right' : '',
        props.empty ? 'empty' : ''
      ]"
    >
      <div v-if="detailData">
        <span
          v-if="detailData.type === 'money'"
          v-money="formatValue(detailData)"
        ></span>
        <span v-else>{{ formatValue(detailData) }}</span>
      </div>
      <slot v-else></slot>
    </div>
  </div>
</template>
<script setup>
import { dictStore } from '@/pinia/modules/dict'
import { formatValue } from '@/utils/index'
const labelWidth = inject('label-width')
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  span: {
    type: Number,
    default: 1
  },
  detailData: {
    type: Object,
    default: () => null
  },
  empty: {
    type: Boolean,
    default: false
  },
  noContentBorderRight: {
    type: Boolean,
    default: false
  }
})
const labelRef = ref(null)

onMounted(() => {
  labelRef.value.style.width = `${labelWidth}px`
})
</script>

<style lang="scss" scoped>
.label {
  position: relative;
}
.required {
  position: absolute;
  left: -8px;
  top: 0;
  // margin-top: -12px;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-input-number) {
  width: 100%;
}
:deep(.upload-rules) {
  color: red;
  margin-bottom: 5px;
}
</style>
